<template>
    <div>
        <titleNav></titleNav>

        <footerBox></footerBox>
    </div>
</template>

<script>
    import titleNav from "../../components/titleNav";
    import {getLaboratoryList, getLaboratoryNews} from "../../api";
    import footerBox from "../../components/footerBox";
    export default {
        name: "laboratory",
        data(){
            return {
                tabColor:1,
                literShow:[],
                newsShow:[]
            }
        },
        created() {
            this.$store.commit('changePage', 3)
            getLaboratoryList().then(res =>{
                console.log(res)
                this.literShow=res.data.rows

            })
            getLaboratoryNews().then(res =>{
                console.log(res)
                this.newsShow=res.data.rows

            })
        },
        components:{
            titleNav,
            footerBox
        },
        methods:{
            toDetail(to,select) {
                this.$router.push({
                    path:'/detailsForNews',
                    query:{
                        id:to,
                        select:select,
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .main {
        width: 100%;
        min-width: 1200px;
        margin: auto;
        .title {
            width: 600px;
            margin: 60px auto;
            overflow: hidden;
        }
        .titleIn {
            width: 200px;
            float: left;
            text-align: center;
            padding-left: 100px;
            p:first-child{
                font-size: 22px;
                text-align: center;
                cursor: pointer;
            }
            p:last-child {
                font-size: 22px;
                text-align: center;
                cursor: pointer;
                height: 50px;
                line-height: 50px;
                opacity: 0.7;
            }
        }
    }
    .blue {
        color: #71cfff!important;
    }
    //新闻主体等效果
    .main {
        width: 970px;
        margin: auto;
    }
    .smallProduct {
        overflow: hidden;
    }

    .smallProductIn {
        float: left;
        width: 277px;
        padding: 0px 10px;
        margin-bottom: 20px;
        cursor: pointer;
        img {
            width: 100%;
            height: 176px;
        }
        .titles {
            font-size:16px;
            font-weight: 700;
            word-wrap:break-word;
            margin: 10px;
        }
        .text {
            font-size: 13px;
            line-height: 20px;
            padding: 0 10px;
            color: #666;
            letter-spacing: 1px;
            text-align: left;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            margin: 10px 0;
        }
    }
    .smallProductIn:hover .shadow {
        box-shadow:  0px 0px 5px #dcdcdc;
    }
    .shadow {
        float: right;
        width: 99.8%;
        margin-left: 0.1%;
    }
    /*//动画效果*/
    .animate {
        transition: transform 1s ease;
    }
    .animate:hover {
        transform: scale(1.1,1.1);
    }
</style>